<template>
  <open-modal :openModal="showOpenModal" @closeModal="closeModalRecommend">
    <div class="c-bg-white c-br-tl20 c-br-tr20 c-text-hidden c-ph24">
      <div class="c-p">
        <div class="c-w100 c-flex-row c-flex-center c-fw600 c-fs28 c-hh88 c-fc-xblack">已有{{number}}位好友{{type == 1 ? '分享': type == 2 ? '注册' : type == 3 ? '下单':''}}</div>
        <i class="iconfont c-pa c-p-t30 c-p-r0 c-fc-gray c-fs32" @click="closeModalRecommend">&#xe84e;</i>
      </div>
      <div class="c-w100 c-bg-white c-minh312 c-maxh600 c-contexty-scroll c-scroll-touch" id="scrollContent" @scroll="scrollContent($event)">
        <div class="c-flex-row c-aligni-center" v-for="(item, index) in list" :key="index">
          <div class="c-ww60 c-hh60 c-p c-brp50">
            <img class="c-w100 c-h c-object-fit-cover c-brp50" :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" alt="">
          </div>
          <div class="c-flex-row c-flex-center c-flex-grow1 c-w0 c-ml20 c-bd-b1 c-pv30">
            <div class="c-fs24 c-fw600 c-fc-xblack c-text-ellipsis1 c-flex-1">{{item.nickname}}</div>
            <div class="c-fs24 c-fc-gray c-text-ellipsis1 c-flex-1 c-textAlign-r">{{item.createdAt}}</div>
          </div>
        </div>
        <loading-status-tem :dataStatus="dataStatus" noDataText="暂无内容"></loading-status-tem>
      </div>
    </div>
  </open-modal>
</template>

<script>
  import OpenModal from "@/components/templates/common/openModal.vue";
  import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
  export default {
    name: 'RecommendModal',
    components: {
      OpenModal,
      loadingStatusTem
    },
    props: {
      showOpenModal: {
        type: Boolean,
        default: false
      },
      list: {
        type: Array,
        default: () => []
      },
      number: {
        type: Number,
        default: 0
      },
      type: {
        type: Number,
        default: 0
      },
      dataStatus: {
        type: String,
        default: 'HAS_MORE_DATA'
      }
    },
    methods: {
      closeModalRecommend() {
        this.$emit('closeModalRecommend')
      },
      scrollContent() {
        this.$emit('scrollContent')
      }
    }
  }
</script>

<style lang="less" scoped>

</style>